<template>
	<view class="container">
		<!-- 提交加载 开始-->
		<u-loading-page :loading="pageLoading" loading-mode="spinner" loading-color="#FFFFFF" icon-size="36" font-size="12" color="#FFFFFF" loading-text="Loading···" bg-color="#00000050"></u-loading-page>
		<!-- 提交加载 结束-->
		<view class="heard">
			<view class="back">
				<image class="back-icon" src="https://www.afbeijing.net/static_resources/assets/back.png" @click="back()"/>
			</view>
			<view class="heardTitle">
				<text>积分商城</text>
			</view>
			<view class="heardCode">
				<text>我的积分</text>
			</view>
			<view class="heardNum">
				<view class="point-container">
					<image class="point-icon" src="https://www.afbeijing.net/static_resources/assets/jifen3.png" />
					<view class="point-number">{{userInfo.scoreCnt}}</view>
					<view style="color: #FFA854;width: 1rpx;height: 40rpx;">|</view>
					<view class="point-text" @click="goToRegister">已兑换</view>
				</view>
			</view>
		</view>

		<view class="main" v-if="!headeListState">
			<view v-for="(item,index) in headeList" :key="index" class="list">
				<view class="mainCase">
					<view class="mainCaseImg">
						<image class="mainCaseGJ"
							:src="item.goodsImg" />
					</view>
					<view class="mainCaseTitle">
						<text>{{goodsName}}</text>
					</view>
					<view class="mainCaseJF">
						<view class="mainCaseJF-container">
							<image class="mainCaseJF-icon"
								src="https://www.afbeijing.net/static_resources/assets/jifen.png" />
							<view class="mainCaseJF-number">{{item.goodsPrice}}</view>
							<view class="mainCaseJF-btn" @click="goToRegister2(item)" v-if="item.hasFlag==='0'">
								<view class="mainCaseJF-text">去兑换</view>
							</view>
							<view class="mainCaseJF-btn"  v-else>
								<view class="mainCaseJF-text bgGray">{{item.hasFlagName}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-if="headeListState">
			<u-empty
					mode="car"
					text="暂无数据"
					icon="https://www.afbeijing.net/static_resources/assets/empty.png"
					textColor="#808080"
					textSize="36rpx"
			>
			</u-empty>
		</view>
	</view>
</template>

<script>
	import { selectGoods,buyGoods } from './api/index.js'
	import { getRefreshInfo } from '@/src/tools/index.js'
	export default {
		data() {
			return {
				userInfo:{},//用户信息
				headeList:[],
				pageLoading:false,
				headeListState: true
			}
		},
		/**
		 * 页面加载时触发
		 * 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数
		 */
		onLoad(options) {
			this.getRefreshInfo()
			this.userInfo = uni.getStorageSync('userInfo')
		},
		
		/**
		 * 页面显示时触发
		 * 每次打开页面都会触发
		 */
		onShow() {
			this.getRefreshInfo()
			this.userInfo = uni.getStorageSync('userInfo')
		},
		mounted(){
			this.getRefreshInfo()
			this.userInfo = uni.getStorageSync('userInfo')
			
		},
		watch: {
		    userInfo(newValue, oldValue) {
		      console.log(`数据从 ${oldValue.scoreCnt} 变为 ${newValue.scoreCnt}`);
		    }
		  },
		methods: {
			//查询头像框
			getInfo(){
				selectGoods({pageNum:1,pageSize:100,}).then(response => {
					console.log(response)
					if (response.code === 0) {
						this.headeList =response.data
						if(this.headeList.length>0){
							this.headeListState = false
						}else{
							this.headeListState = true
						}
					}else{
						uni.$u.toast(response.msg)
					}
				}).catch(errors => {
								// uni.$u.toast(errors)
				})
			},
			back(){
				uni.navigateBack();
			},
			goToRegister() {
				console.log(22)
				uni.navigateTo({
					url: '/src/views/pageMine/jifenshangcheng/yiduihuan/index' // 这里替换成你实际要跳转的页面路径
				});
			},
			//去兑换
			goToRegister2(e) {
				buyGoods({goodsId:e.goodsId}).then(response => {
					console.log(response)
					if (response.code === 0) {
						uni.navigateTo({
							url: '/src/views/pageMine/jifenshangcheng/duihuanfankui/index' // 这里替换成你实际要跳转的页面路径
						});
					}else{
					 uni.$u.toast(response.msg) 
					}
				}).catch(errors => {
								// uni.$u.toast(errors)
				})
				
			},
			getRefreshInfo(){
				getRefreshInfo().then(response => {
					console.log('获取最新用户信息：', response)
					if (response.code === 0) {
						uni.setStorageSync('token', response.data.token); //存储token
						uni.setStorageSync('isLogin', true); //存储登录状态
						uni.setStorageSync('userInfo', response.data); //存储个人信息
						this.userInfo = response.data
						this.getInfo()
					}else{
					 uni.$u.toast("令牌失效，重新登录") 
					 this.getInfo()
					}
				}).catch(errors => {
								// uni.$u.toast(errors)
								this.getInfo()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";
	.bgGray{
		background: #808080 !important;
	}
	.container {
		position: relative;
		background-color: #F2F2F2;
		height: 100vh;
	}
	.back{
		padding-top: 14%;
		padding-left: 30rpx;
	}
	.back-icon{
		width: 40rpx;
		height: 40rpx;
	}
	.heard {
		height: 480rpx;
		width: 100%;
		background-image: url(#{$bgImageUrl}/assets/jfscheardBG.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.heardTitle {
		font-weight: bold;
		font-size: 48rpx;
		color: #FFFFFF;
		line-height: 31rpx;
		margin-top: 16%;
		margin-left: 10%;
	}

	.heardCode {
		margin-top: 50rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 31rpx;
		margin-left: 10%;
	}

	.heardNum {
		margin-top: 10rpx;
		width: 240rpx;
		height: 50rpx;
		background: #FF8106;
		border-radius: 10rpx;
		margin-left: 10%;
	}

	.point-container {
		display: flex;
		align-items: center;
	}

	.point-icon {
		width: 26rpx;
		height: 26rpx;
		padding-left: 20rpx;
		margin-right: 10rpx;
	}

	.point-number {
		padding-right: 20rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #FEFEFE;
		line-height: 50rpx;
	}
	
	.point-text {
		width: 100rpx;
		padding-left: 20rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
	}

	.main {
		display: flex;
		flex-wrap: wrap;
		text-align: left;
		justify-content: space-around;
		padding-left: 20rpx;
		padding-right: 20rpx;
		width: 100%;
		height: 70vh;
		overflow: auto;
	}
	.main .list:last-child {
		/* 让最后一个元素的右边距自动适应，从而实现左对齐的效果。 */
		margin-right: auto; 
		padding-left:30rpx;
	}
	.mainCase {
		width: 300rpx;
		height: 340rpx;
		background: #ffffff;
		border-radius: 40rpx;
		margin-top: 50rpx;
		text-align: center;
	}

	.mainCaseImg {
		height: 220rpx;
		width: 100%;
	}

	.mainCaseGJ {
		height: 190rpx;
		width: 200rpx;
		border-radius: 40rpx;
		margin-top: 30rpx;
	}

	.mainCaseTitle {
		margin-top: 30rpx;
		padding-left: 20rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #808080;
		text-align: left;
	}

	.mainCaseJF {}

	.mainCaseJF-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.mainCaseJF-icon {
		width: 26rpx;
		height: 26rpx;
		padding-left: 20rpx;
		margin-right: 10rpx;
	}

	.mainCaseJF-number {
		padding-right: 20rpx;
		font-weight: bold;
		font-size: 24rpx;
		color: #FFB607;
		line-height: 60rpx;
	}

	.mainCaseJF-btn {
		margin-left: auto;
	}

	.mainCaseJF-text {
		width: 80rpx;
		height: 30rpx;
		background: #3CAB7E;
		border-radius: 15rpx;
		margin-right: 20rpx;
		text-align: center;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 30rpx;
	}
	.empty{
		height: 70%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>